<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" title="QMS"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<scroll-view :show-scrollbar="false" :scroll-y="false" class="scroll" @scrolltolower="scrolltolowerFn">
				<view class="tabBox">
					<view class="tab-item" v-for="(item, index) in data.list" :key="index" @click="changeIndex(index)">
						<view :class="data.tabIndex == index ? 'tab-choice' : ''">{{ item.title }} </view>
					</view>
				</view>

				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head" v-if="data.tabIndex == 0">
					<view class="icons family">

						<view class="gui-grid-item  icons_item" v-for="(x, i) in data.qualityTesting" :key='i'
							@click="goPage(x.path)">

							<image :style="{ opacity: (pagePermission(x.path) ? '1' : '0.3') }"
								class="gui-grid-icon-img  icons_item_img" :src="x.imgPath"></image>
							<text :style="{ color: (pagePermission(x.path) ? '' : 'gray') }"
								class="gui-grid-text gui-primary-text icons_title">{{ x.text }}</text>

						</view>

					</view>
				</view>
			</scroll-view>
		</template>
	</gui-page>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { navigate } from '@/utils/routerSkip.js'
import scanCode from "@/components/scan-code/scan-code.vue";
import { hasPagePermission } from "@/common/pagePermission.js"
// 图片地址
import { IMG_BASE_URL } from "@/constant/config.js"
//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const baseUrl = IMG_BASE_URL;

components: { scanCode }

let data = reactive({
	tabIndex: 0, //当前访问的index值，默认为0
	list: [{ title: t('multilingual.qualityInspection') }],
	tabList: [],

	qualityTesting: [{
		path: '/pages/market/productionTesting',
		text: t('multilingual.prodInspection'),
		imgPath: baseUrl + '/afl-app/img/202211011043380587_admin.png'
	},
	{
		path: '/pages/qms/secondTest',
		text: t('translationImage.secondTest'),
		imgPath: baseUrl + '/afl-app/img/202211011058260452_admin.png'
	},
	{
		path: '/pages/qms/iqc',
		text: t('translationImage.incomingInspection'),
		imgPath: baseUrl + '/afl-app/img/202211011057280011_admin.png'
	},
	{
		path: '/pages/qms/pqc',
		text: t('translationImage.processInspection'),
		imgPath: baseUrl + '/afl-app/img/202211011046320371_admin.png'
	},
	{
		path: '/pages/qms/pqcNew',
		text: t('translationImage.processInspectionNew'),
		imgPath: baseUrl + '/afl-app/img/202211011046320371_admin.png'
	},
	{
		path: '/pages/qms/fqc',
		text: t('translationImage.fqc'),
		imgPath: baseUrl + '/afl-app/img/202211011050310967_admin.png'
	},
	{
		path: '/pages/qms/iqcOtherOutbound',
		text: t('consumo.qualityInspectionPickMaterial'),
		imgPath: baseUrl + '/afl-app/img/202211290750440211_admin.png'
	},
	// {
	// 	path: '/pages/qms/iqcOtherBound',
	// 	text: t('materials.outboundOrder'),
	// 	imgPath: 'https://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/%E8%B0%83%E6%8B%A8%E5%87%BA%E5%BA%93%E5%BD%95%E5%8D%95.png'
	// }
	, {
		path: '/pages/scrapMark/scrapMark',
		text: t('locationBarcodeInfo.scrapMark'),
		imgPath: 'https://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/13B267D9DA9A4DC486DA110E92A76943.png'
	}
	// , {
	// 	path: '/pages/qms/crushed',
	// 	text: t('locationBarcodeInfo.crushed'),
	// 	imgPath: 'https://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/5B448B77D35B4C47AC4CB4A6ED31DEA8.png'
	// }
	]
})

//tabs标签点击事件
const changeIndex = (index) => {
	data.tabIndex = index;
};


// 跳转页面
const goPage = (path) => {
	console.log(path)
	var hasPermission = hasPagePermission(path);
	if (hasPermission) {
		navigate({
			url: path
		})
	}
	else {
		uni.showToast({
			title: 'No Permission',
			icon: 'none'
		})
		return
	}
};
const scrolltolowerFn = () => {

}


</script>

<style lang="scss" scoped>
.family {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

//tabs
.tabBox {
	height: 100rpx;
	width: 100%;
	position: relative;
	white-space: nowrap;
	margin-bottom: 30rpx;
	background-color: #fff;
}

.tab-item {
	padding: 15rpx 20rpx;
	position: relative;
	display: inline-block;
	text-align: center;
	transition-property: background-color, width;
	font-size: 36rpx;
}

.tab-choice {
	position: relative;
	color: #37886c;
}

.tab-choice:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12rpx;
	width: 100%;
	height: 4rpx;
	border-radius: 2rpx;
	background-color: #37886c;
}

// // 删除 底部滚动条
/* #ifndef APP-NVUE */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}

/* #endif */
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
	display: none;
}

/* #endif */

.icons {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
	padding-top: 40rpx;

	&_item {
		width: 33%;

		&_img {
			display: block;
			width: 90rpx;
			height: 90rpx;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}
}

.icons_title {
	font-size: 28rpx;
	margin-bottom: 40rpx;
}</style>
